<script setup lang="ts" name="OrderAmount">
import { reqOrderAmount } from "@/apis/supply";
import type { OrderAmountList, OrderAmountResponseData } from "@/apis/supply/type";
import * as echarts from "echarts";
import { onMounted, ref } from 'vue'

let orderAmount = ref<OrderAmountList>([]);
let myEcharts = ref();
async function getOrderAmount() {
  let res: OrderAmountResponseData = await reqOrderAmount();
  if (res.code === 200) {
    orderAmount.value = res.data;
    console.log(orderAmount.value,'七日收货订单金额');

    initEcharts(orderAmount.value);
  }
}
onMounted(() => {
  getOrderAmount();

})
// 初始化echarts
const initEcharts = (data: OrderAmountList) => {
  let xData = data.map(item => item.name.slice(5));
  let yData = data.map(item => item.value);
  // let yData = [100, 300, 695, 746, 333,100,1500];
  let max = Math.max(...yData);
  // let xData = ['8-13', '8-14', '8-15', '8-16', '8-17'];
  max = max + 100;
  const myChart = echarts.init(myEcharts.value);
  const option = {
    grid: {
      // 设置图表四周留白间距
      top: '13%',
      right: '5%',
      bottom: '16%',
      left: '18%'
    },
    yAxis: {
      type: 'value',
      max: max,
      axisLabel: {
        formatter: '{value}￥', // 设置单位为元
        color: 'rgba(189, 209, 255, 0.6)',
        fontSize: 12
      },
      // max: 0.1, //最大刻度值
      // interval: 2, //刻度值间隔值
      name: '',
      // boundaryGap: false,
      nameTextStyle: {
        color: 'rgba(189, 209, 255, 0.9)',
        align: 'right',
        verticalAlign: 'bottom',
        fontSize: 14
      },
      splitLine: {
        // 网格线
        show: true, // 关闭网格线
        // 或者
        lineStyle: {
          type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#2c4866',
          width: 2,
          type: 'solid'
        }
      }
    },
    xAxis: {
      data: xData,
      show: true,
      type: 'category',
      boundaryGap: true, // 设置x轴两边的留白
      axisTick: {
        // x轴刻度尺
        show: false
      },
      axisLabel: {
        color: 'rgba(189, 209, 255, 0.9)',
        fontSize: '12',
        margin: 10,
        interval: 0,//使x轴横坐标全部显示
        rotate: 30,//x轴文字倾斜角度
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#2c4866',
          width: 2,
          type: 'solid'
        }
      },
      // x轴线条颜色
      lineStyle: {
        color: '#eee',
        type: 'dashed',
        width: 1
      }

    },
    series: [
      {
        data: yData,
        label: {
          show: true,
          position: 'top',
          distance: 10,
          // left: 'left',
          color: '#fff',
          formatter: '{c}￥', // 使用内置的c来显示数值
          fontSize: 14 // 数值字体大小
        },
        type: 'line',
        // smooth: true, // 平滑
        color: '#43F8FF',
        lineStyle: {
          width: 3, // 外边线宽度
          color: '#00FFFF' // 外边线颜色
        },
        // showSymbol: false, // 去除面积图节点圆
        areaStyle: {
          // 区域填充渐变颜色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#01EAFF' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(0,210,255, 0)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  }
  option && myChart.setOption(option);
}
</script>
<template>
  <div style="display: flex;justify-content: center;align-items: center;">
    <div ref="myEcharts" class="myEcharts" style="width: 90%;height: 280px;"></div>
  </div>
</template>
<style scoped></style>